<template>
  <div class="grid-template-columns">
    <h3>grid-template-columns布局</h3>
    <div class="grid-template-columns-content">
      <div v-for="item in 9" :key="item" :class="'item' + item">
        {{ item }}
      </div>
    </div>
    <br />
    <pre>
      <span class="remarks">用法：grid-template-columns</span>
      可选值
      none 默认值，不指定列的大小。相当于设置为1fr
      auto 列的大小由容器的大小和列中网格元素内容的大小决定。
      max-content 每列的大小设置为该列中最大网格元素的大小。
      min-content 每列的大小设置为该列中最小网格元素的大小。
      length 长度值，可以是 px 为单位的数值或百分比 %。 0 是默认值。
      repeat() 重复某种模式。第一个参数是重复的次数，第二个参数是重复的模式。
      <span class="remarks">常见用法 repeat(2, 1fr) 表示定义两列，每列的宽度是1fr</span>

      auto-fill 有时，单元格的大小是固定的，但是容器的大小不确定。
                如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
      <span class="remarks">grid-template-columns: repeat(auto-fill, 100px);</span>
      <span class="remarks">  表示每列宽度100px，然后自动填充，直到容器不能放置更多的列</span>

      fr 为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。
         如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
      <span class="remarks">grid-template-columns: 1fr 1fr; // 表示两个相同宽度的列。</span>
      fr可以与绝对长度的单位结合使用，这时会非常方便
      <span class="remarks">grid-template-columns: 150px 1fr 2fr;</span>
      <span class="remarks">表示第一列的宽度为150像素，第二列的宽度是第三列的一半。</span>

      minmax() 产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
      <span class="remarks">grid-template-columns: repeat(3, minmax(100px, 1fr))</span>
      <span class="remarks">表示为一行三列，每列最小宽度100px,最大宽度自适应</span>
      
    </pre>
  </div>
</template>
<script>
export default {
  name: 'GridTemplateColumns',
  data() {
    return {}
  },
  methods: {},
}
</script>
<style lang="less" scoped>
.grid-template-columns {
  &-content {
    // width: 600px;
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 10px;
    div {
      background-color: red;
    }
    // .item3{
    //   width: 200px;
    // }
  }
  .remarks {
    color: red;
    font-weight: bold;
  }
}
</style>
